<template>
	<view>
		<Header type="back" />
		
		<view class="w-100" :class="'h'+bar_h"></view>
		
		<view class="w-100 h80">
			<view class="w-100 f-b-c h80">
				<view class="w-50 re h80 f-c-c ty-nav-li" @click="nav_change(item)" v-for="(item,index) in serve" :key="item.code" :class="item.code == nav_code?'bg-f8ff':''">
					<!-- 左边边角显示 选中并且不能是第一个  -->
					<HornMargin type="left-bottom" :width="44" :height="40" v-if="item.code==nav_code && index != 0"/>
					<view class="t-b font32 font600">{{item.title || ''}}</view>
					<!-- 右边边角显示  选中并且不能是最后一个 -->
					<HornMargin type="right-bottom" :width="44" :height="40" v-if="item.code==nav_code && index != (serve.length-1)"/>
				</view>
			</view>
		</view>
		
		
		
		<view class="bg-theme w-100 ab left0 bottom0" :class="'top'+(bar_h*1+78)">
			<view class="w-100 bg-f8ff pt-5 rounded-120-bottom re" v-show="nav_code == 'badge'">
				<view class="w-100 ov-hd-y ab top30 bottom0 left0 px-2-6"> 
					<view class="w-100 h20"></view>
					<view class="w-100 h100 circle100 show0 bg-white re">
						<view class="pl-4 h40 pt-1 font26 t-20 font600">再收集 {{10-number}} 个徽章即可获得礼盒</view>
						<view class="w-100 h36 mt-1 px-2-6">
							<view class="w564 h36 re bg-theme_6 circle40">
								<view class="h36 bg-theme_2 circle40 re show0" :style="'width:'+564 * (number/10)+'rpx'">
									<view class="ab icon_equity  w106 h138" :class=" number > 0 ? 'right30':'left0'">
										<image src="../../../static/icon_equity_3.png" class="w106 h138"/>
									</view>
									<view  v-if="number > 8" class="ab top0 right120 h36 font24 t-20 font500 f-c-c">{{number}} / 10 </view>
								</view>
								<view v-if="number <= 8" class="ab top0 right30 h36 font24 t-20 font500 f-c-c">{{number}} / 10 </view>
							</view>
						</view>
						<view class="ab rounded-circle w128 h128 bg-white show0 ty-liwu" @click="set_popup_open('gift')">
							<image src="../../../static/icon_badge.png" class="w-100 h-100 rounded-circle" />
						</view>
					</view>
					
					<view class="w-100 h40"></view>
					
					<view class="w-100 re">
					 	<view class="w-100 h200 re">
							<image src="../../../static/badge_top.png" class="w-100 h200" />
							<view class="w-100 ab top32 left0 f-c-c">
								<image src="../../../static/icon_badge_1.png" class="w299 h122"/>
							</view>
						</view>
						<view class="w-100 px-2 fs-n-s bg-img-cur">
							<view class="w-25 fs-n-c ty-li re"  :class="set_pd_number(index)?'pb-3':''" @click="set_popup_open(item)"  v-for="(item,index) in badge_ability" :key="item.badgeId">
								<ImageFile :url="item.pic" className="w144 h144" :class="item.badgeNum?'':'grayscale'"/>
								<view class="f-y-c w-100 mt-1 f-c-c">
									<view class="font24 t-8 mr-05">{{item.badgeName|| ''}}</view>
									<image class="w26 h26" v-if="item.badgeNum" src="../../../static/icon_badge_2_2.png"></image>
									<image class="w26 h26" v-else :class="item.badgeNum?'':'grayscale'" src="../../../static/icon_badge_2_1.png"></image>
								</view>
								<view v-if="item.badgeNum" class="ab px-05 top12 right20 bg-theme_9 rounded-circle font20 t-0 show2">x{{ item.badgeNum || '0' }}</view>
							</view>
						</view>
						
						<view class="w-100 h100 re">
							<image src="../../../static/badge_bottom.png" class="w-100 h100" />
							<view class="w-100 ab top32 left0 f-c-c font22 t-8 font600">
								<image src="../../../static/icon_helf.png" class="w32 h32"/>收集渠道说明提示
							</view>
						</view>
					</view>
					
					<view class="w-100 h40"></view> 
					
					<view class="w-100 re">
					 	<view class="w-100 h200 re">
							<image src="../../../static/badge_top_1.png" class="w-100 h200" />
							<view class="w-100 ab top32 left0 f-c-c">
								<image src="../../../static/icon_badge_2.png" class="w299 h122"/>
							</view>
						</view>
						<view class="w-100 px-2 fs-n-s bg-img-cur-1">
							<view class="w-25 fs-n-c ty-li re"  :class="set_pd_number_(index)?'pb-3':''"  @click="set_popup_open(item)"  v-for="(item,index) in badge_prop" :key="item.badgeId">
								<ImageFile :url="item.pic" className="w144 h144"  :class="item.badgeNum?'':'grayscale'"/>
								<view class="f-y-c w-100 mt-1 f-c-c">
									<view class="font24 t-8 mr-05">{{item.badgeName|| ''}}</view>
									<image class="w26 h26" v-if="item.badgeNum" src="../../../static/icon_badge_1_1.png"></image>
									<image class="w26 h26" v-else :class="item.badgeNum?'':'grayscale'" src="../../../static/icon_badge_1_2.png"></image>
								</view>
								<view v-if="item.badgeNum" class="ab px-05 top12 right20 bg-theme_10 rounded-circle font20 t-0 show2">x{{ item.badgeNum || '0'}}</view>
							</view>
						</view>
						
						<view class="w-100 h100 re">
							<image src="../../../static/badge_bottom_1.png" class="w-100 h100" />
							<view class="w-100 ab top32 left0 f-c-c font22 t-8 font600">
								<image src="../../../static/icon_helf.png" class="w32 h32"/>收集渠道说明提示
							</view>
						</view>
					</view>
					
					<view class="w-100 h220"></view>
					
				</view>
			</view>
			<view class="w-100 bg-f8ff pt-5 rounded-120-top re" :style="'height:'+height+'rpx'"  v-show="nav_code=='grow'">
				<view class="w-100 ov-hd-y ab top30 bottom0 left0">
					<GrowUp></GrowUp>
				</view>
			</view>
		</view>
	
		<Footer index="my"></Footer>
		
		<!-- 礼物 -->
		<uni-popup type="center" ref="gift_popup">
			<view>
				<PopupHeader>
					<template slot="popup_header">
						<view class="f-c-c" @click="get_gift_info">
							<image src="../../../static/icon_gift.png" class="w198 h198" />
	
						</view>
						<view class="w-100 t-a font45 t-0 font600 re">
							森林礼盒
							<view class="ab top16 text-line right28 font24" @click="get_record">领取记录</view>
						</view>
						<view class="w-100 h36 mt-1 px-2-6">
							<view class="w584 h36 re bg-theme_6 circle40">
								<view class="h36 bg-f8ff circle40 re show0" :style="'width:'+584 * (number/10)+'rpx'"></view>
								<view class="ab top0 right0 w-100 h36 font24 t-20 font500 f-c-c">{{number}} / 10 </view>
							</view>
						</view>
					</template>
					<template slot="popup_content">
						<view class="re">
							<view class="ab right30 top50">
								<view class="w374 h94 bg-f8ff">

									<view v-if="number>=10" class="w-100 h-100 px-2-6 py-1 bg-theme rounded-bottom-20 font25 t-20 fs-n-c font600">已集齐10个徽章，请收下礼盒吧</view>
									<view v-else class="w-100 h-100 px-2-6 py-1 bg-theme rounded-bottom-20 font25 t-20 fs-n-c font600">再收集{{10 - number}}个徽章，就可以打开礼盒啦</view>
									<!-- <br/> 小小学士啦（1000积分）</view> -->
								</view>
								<view class="w374 h94 bg-theme">
									<view class="w-100 h-100 bg-f8ff rounded-top-20"></view>
								</view>
							</view>
							<image src="../../../static/icon_equity_3.png" class="w330 h498 ml-5 pt-1 re z-999"/></image>
							<image src="../../../static/icon_badge_bg.png" class="w-100 h160 ab top224 left0 z-99"/></image>
						</view>
					</template>
				</PopupHeader>
				
				<view class="w-100 f-c-c">
					<image src="../../../static/icon_close.png" @click="set_popup_close" class="w84 h84 bg-theme p-2" />
				</view>
			</view>
		</uni-popup>
		
		<!-- 已收集 -->
		<uni-popup type="center" ref="collected_popup">
			<view>
				<PopupHeader>
					<template slot="popup_header">
						<view class="f-c-c">
							<ImageFile :url="details.pic" className="w198 h198"/>
						</view>
						<view class="w-100 t-a font45 t-0 font600">{{details.badgeName}}</view>
						<view class="w-100 f-c-c pt-1">
							<view class="w218 h36 t-a circle14 bg-f8ff t-0 font22">{{details.label|| ''}}</view>
						</view>
					</template>
					<template slot="popup_content">
						<view class="re w-100 h378">
							<view class="w-100 px-6 re z-999">
								<view class="w-100 t-20 font32 pr-1 pt-6"><text class="font600 t-theme_1 font40 mr-1">{{userInfo.userName|| ''}}</text> 小朋友，恭喜你！</view>
								<view class="font32 t-20 pr-1 pt-3">在<text class="font600 t-theme_1">{{details.receiveTime|| '-'}}</text>，完成了<text class="font600 t-theme_1">{{details.receiveLog}}</text>，成功获得徽章！</view>
							</view>
							<image src="../../../static/icon_popup_info.png" class="ab bottom15 right13 w346 h346" />
						</view>
					</template>
				</PopupHeader>
				
				<view class="w-100 f-c-c">
					<image src="../../../static/icon_close.png" @click="set_popup_close" class="w84 h84 bg-theme p-2" />
				</view>
			</view>
		</uni-popup>
		
		<!-- 未收集 -->
		<uni-popup type="center" ref="collecting_popup">
			<view>
				<PopupHeader>
					<template slot="popup_header">
						<view class="f-c-c">
							<ImageFile :url="details.pic" className="w198 h198"/>
						</view>
						<view class="w-100 t-a font45 t-0 font600">{{details.badgeName|| ''}}</view>
						<view class="w-100 f-c-c pt-1">
							<view class="w218 h36 t-a circle14 bg-f8ff t-0 font22">{{details.label|| ''}}</view>
						</view>
						
					</template>
					<template slot="popup_content">
						<view class="re ov-hd">
							<view class="ab right30 top50">
								<view class="w318 h94 bg-f8ff">
									<view class="w-100 h-100 bg-theme rounded-bottom-20 font25 t-20 fs-n-c font600">点亮展具、参与路线 <br/> 即可获得更多徽章！</view>
								</view>
								<view class="w318 h94 bg-theme">
									<view class="w-100 h-100 bg-f8ff rounded-top-20"></view>
								</view>
							</view>
							<image src="../../../static/icon_equity_2.png" class="w330 h498 ml-5 pt-1 re z-999"/></image>
							<image src="../../../static/icon_badge_bg.png" class="w-100 h160 ab top224 left0 z-99"/></image>
						</view>
					</template>
				</PopupHeader>
				
				<view class="w-100 f-c-c">
					<image src="../../../static/icon_close.png" @click="set_popup_close" class="w84 h84 bg-theme p-2" />
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Header from "../../../components/header.vue"
	import Footer from "../../../components/footer.vue"
	import PopupHeader from "./components/popup-header.vue"
	import HornMargin from "../../../components/horn_margin.vue"
	import ImageFile from "../../../components/img_file.vue"
	import GrowUp from "./grow-up.vue"
	
	import { receivedBadgeList,receiveReward } from "../../../api/user.js"
	import reUserInfo from "../../../common/user_info.js"
	export default{
		components:{
			Header,
			Footer,
			PopupHeader,
			HornMargin,
			GrowUp,
			ImageFile
		},
		mixins:[reUserInfo],
		data(){
			return{
				bar_h:0, // 状态栏高度
				number:0,
				badge:[],
				badge_ability:[],
				badge_prop:[],
				serve:[
					{title:"我的徽章",code:"badge"},
					{title:"我的成长",code:"grow"}
				],
				nav_code:"badge",
				height:0,
				details:{},
				userInfo:{}
			}
		},
		created() {
			this.get_receivedBadgeList()
			const { statusBarHeight } = uni.getStorageSync("systemInfo")
			this.bar_h = 100 + (statusBarHeight / (uni.upx2px(100) / 100)) // 状态栏高度  +  预留背景高度 整个背景高度
			
			this.height = uni.getStorageSync("map_height")
			this.userInfo = uni.getStorageSync('userInfo') || {}
		},
		
		methods:{
			get_record(){
				uni.navigateTo({
					url:'/pages/my/badge/record'
				})
			},
			nav_change(e) {
				this.nav_code = e.code
			},
			// 开启弹窗
			set_popup_open(val){
				
				if(val == 'gift'){
					return	this.$refs[val+'_popup'].open()
				}
				this.details = val
				let name = 'collecting'
				if(val.badgeNum){
					name = 'collected'
					return this.$refs[name+'_popup'].open()
				}
				return uni.showToast({
					title:"未解锁",
					icon:"none"
				})
				// this.$refs[name+'_popup'].open()
			},
			// 关闭弹窗
			set_popup_close(){
				this.$refs.gift_popup.close()
				this.$refs.collecting_popup.close()
				this.$refs.collected_popup.close()
			},
			set_pd_number(index){
				// 超过整排都 都需求去掉padding-bottom
				let number = parseInt(this.badge_ability.length / 4) * 4 
				if(number <= index){
					return false
				}
				return true
			},
			get_gift_info(){
				if(this.number < 10){
					return uni.showToast({
						title:"徽章数量不足！",
						icon:"none"
					})
				}else{
					receiveReward().then(res=>{
						if(res.code == 0){
							uni.showToast({
								title:"领取成功",
								icon:"none"
							})
							// this.number = 0
							setTimeout(()=>{
								this.re_user_info()
								
								this.get_receivedBadgeList()
								
								this.set_popup_close()
							},1000)
							
						}
					})
				}
			},
			set_pd_number_(index){
				// 超过整排都 都需求去掉padding-bottom
				let number = parseInt(this.badge_prop.length / 4) * 4 
				if(number <= index){
					return false
				}
				return true
			},
			async get_receivedBadgeList(){
				const { code,body } = await receivedBadgeList()
				if(code === '0'){
					let number = 0
					body?.map(item=>{
						if(item.badgeType === 'ABILITY'){
							this.badge_ability = item.badgeList
						}
						if(item.badgeType === 'PROP'){
							this.badge_prop = item.badgeList
						}
						item.badgeList?.map(obj=>{
							if(obj.badgeNum){
								number += obj.badgeNum
							}
						})
					})
					// 用当前用户获取的所有徽章数量-这个已兑换的，就是剩下可以参与徽章收集的数量
					// 缓存里面是最新的
					let userInfo = uni.getStorageSync('userInfo') || {}
					number = number - userInfo.badgeExchangeNum
					if(number > 10){
						number = 10
					}
					this.number = number
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rounded-120{
		border-radius: 0 0 0 88rpx;
	}
	.rounded-120-bottom{
		min-height: 100%;
		border-radius: 0 88rpx 0 0;
	}
	.rounded-120-top{
		border-radius: 88rpx  0 0 0;
	}
	.ty-liwu{
		top: -14rpx;
		right: -4rpx;
	}
	.icon_equity{
		bottom: -32rpx;
		right: 16rpx;
	}
	.ty-top{
		border-radius: 100% 100% 0 0 ;
	}
	.ty-list{
		padding-left: 32rpx;
		padding-right: 32rpx;
		border-radius: 0 0 40rpx 40rpx;
	}
	.ty-nav-li{
		border-radius: 32rpx;
		&.bg-f8ff{
			border-radius: 32rpx 32rpx 0 0;
			.t-b{
				color: #000000;
			}
		}
	}
	.rounded-badge-top{
		border-radius: 84% 84% 0 0 ;
	}
	
	.bg-img-cur{
		background: url("../../../static/badge_center.png") repeat;
		background-size: 100% 54rpx;
	}
	.bg-img-cur-1{
		background: url("../../../static/badge_center_1.png") repeat;
		background-size: 100% 54rpx;
	}
	.ty-bg{
		width: 200%;
		height: 320rpx;
	}
	.rounded-bottom-20{
		// padding: 14rpx 0;
		border-radius: 20rpx 20rpx 20rpx 0;
	}
	.rounded-top-20{
		border-radius: 56rpx 0 0 0;
	}
	.grayscale{
		filter: grayscale(100%);
	}
	
</style>
